<script setup>
import { ref, onMounted } from "vue";
import _ from 'underscore'
import Count from "./components/Count.vue";

onMounted(() => {
  const socket = new WebSocket("ws://192.168.35.16:8888/online/tree/socket");

  socket.addEventListener("message", (event) => {
    console.log("Message from server ", event.data);
  });  
})

const stages = ref(1);

const plussNum = ref(1);
const plus = ref(false);
const wateroff = ref(true);
const movetree = ref(true);
const treemove = ref(false);
const watercss = ref(false);
const waterdom = ref(false);
const counter = ref(null)
function setTree(time = 4000) {
  setTimeout(() => {
    plussNum.value = 1;
    plus.value = false;
    wateroff.value = true;
    watercss.value = false;
    treemove.value = false;
  }, time);
}

// 点击树的动画
function tree() {
  if (movetree) {
    treemove.value = true;
    movetree.value = false;
    setTimeout(() => {
      movetree.value = true;
      treemove.value = false;
    }, 1000);
  }
}

// 水壶浇水动画
function water() {
  if (wateroff.value) {
    watercss.value = true;
    wateroff.value = false;

    setTimeout(() => {
      waterdom.value = true;
    }, 1500);

    setTimeout(() => {
      // info.value.votes++;
      plus.value = true;
      treemove.value = true;
      movetree.value = false;
    }, 2000);

    setTimeout(() => {
      waterdom.value = false;
      movetree.value = true;
    }, 3500);

    setTree();
    counter.value.start(true)    
  }
}
</script>

<template>
  <div class="page">

    <Count ref="counter"/>

    <div class="canvas">
      <!-- 云朵位移 -->
      <div class="cloud">
        <div class="fly-1"></div>
        <div class="fly-2"></div>
        <div class="fly-3"></div>
      </div>

      <!-- 树 -->
      <div class="tree">
        <img
          :src="'/src/assets/tree-' + stages + '.png'"
          :class="['tree-' + stages, treemove ? 'move-' + stages : '']"
          hover-class="none"
          @click="tree"
        />
      </div>

      <!-- 水壶、浇水动画 -->
      <div class="kettle">
        <div
          class="flasks"
          v-show="watercss"
          :class="{ water: watercss }"
        ></div>
        <div
          class="flasms"
          v-show="!watercss"
          @click="water"
          hover-class="none"
        ></div>
        <div class="waters" v-show="waterdom"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.canvas {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("/src/assets/bg.jpg") no-repeat;
  background-size: cover;
  overflow: hidden;
}

.canvas .cloud {
  margin-top: 128px;
}

.canvas .cloud view {
  margin: 40px 0;
}

.canvas .cloud .fly-1 {
  width: 102px;
  height: 68px;
  animation: cloud-1 80s ease-in-out 0s infinite alternate;
  background: url(/src/assets/fly-1.png) no-repeat;
  background-size: contain;
}

.canvas .cloud .fly-2 {
  width: 72px;
  height: 52px;
  animation: cloud-2 60s linear 0s infinite alternate;
  background: url(/src/assets/fly-2.png) no-repeat;
  background-size: contain;
}

.canvas .cloud .fly-3 {
  width: 78px;
  height: 56px;
  animation: cloud-3 70s ease 0s infinite alternate;
  background: url(/src/assets/fly-3.png) no-repeat;
  background-size: contain;
}

.canvas .tree {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 160px;
  justify-content: center;
  right: 151px;
  top: 411px;
}

.canvas .tree .rain {
  position: relative;
  top: -100px;
  margin: 10px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 16px;
  color: green;
  background: repeating-radial-gradient(#0fff00, #53c72d);
  box-shadow: 0 0 16px 6px #b8ffc4;
  border-radius: 50%;
  animation: rain 4s infinite;
  z-index: 1;
}

.canvas .tree .rain text {
  font-size: 12px;
}

.canvas .tree .rain-1 {
  top: -100px;
}

.canvas .tree .rain-2 {
  top: -200px;
}

.canvas .tree .rain-3 {
  top: -300px;
}

.canvas .tree .rain:nth-child(1) {
  animation-delay: 0.8s;
  margin-top: 10px;
}

.canvas .tree .rain:nth-child(2) {
  animation-delay: 0.5s;
  margin-top: -10px;
}

.canvas .tree .rain:nth-child(4) {
  animation-delay: 0.1s;
  margin-top: -5px;
}

.canvas .tree image {
  position: absolute;
  bottom: 0;
  width: 280px;
  height: 380px;
  z-index: 0;
}

.canvas .tree .tree-1 {
  width: 124px;
  height: 264px;
  position: absolute;
  bottom: 0;
}

.canvas .tree .tree-3 {
  width: 420px;
  height: 460px;
}

.canvas .kettle {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  height: 80px;
}

.canvas .kettle view {
  position: absolute;
  z-index: 2;
}

.canvas .kettle .kettls {
  top: -172px;
  right: 20px;
  width: 116px;
  height: 112px;
  background: url(/src/assets/kettls.png) no-repeat;
  background-size: contain;
  transition: all 2s;
}

.canvas .kettle .flasks {
  top: -176px;
  right: 28px;
  width: 113px;
  height: 70px;
  background: url(/src/assets/flasks.png) no-repeat;
  background-size: contain;
  transition: all 2s;
}

.canvas .kettle .flasms {
  top: -176px;
  right: 26px;
  width: 117px;
  height: 75px;
  background: url(/src/assets/flasms.png) no-repeat;
  background-size: contain;
  transition: all 2s;
}

.canvas .kettle .waters {
  top: 215px;
  right: 1065px;
  width: 85px;
  height: 150px;
  background: url(/src/assets/waters.gif) no-repeat;
  background-size: contain;
  transition: all 2s;
  position: absolute;
}

.canvas .sumup {
  position: absolute;
  bottom: 26px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.canvas .sumup .user {
  display: flex;
  flex-direction: row;
}

.canvas .sumup .user .cover {
  padding: 0 20px;
}

.canvas .sumup .user .cover image {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px solid white;
}

.canvas .sumup .user .info {
  display: flex;
  flex-direction: column;
  color: white;
  justify-content: flex-start;
  padding-top: 16px;
  font-weight: bold;
  text-shadow: 4px 4px 2px #085828;
}

.canvas .sumup .user .info .name {
  font-size: 30px;
  color: white;
}

.canvas .sumup .user .info .name .sex-1 {
  width: 25px;
  height: 31px;
  background: url(/src/assets/male.png) no-repeat;
  background-size: contain;
}

.canvas .sumup .user .info .name .sex-2 {
  width: 21px;
  height: 34px;
  background: url(/src/assets/women.png) no-repeat;
  background-size: contain;
}

.canvas .sumup .user .info .name view {
  margin-left: 12px;
  display: inline-block;
  vertical-align: middle;
}

.canvas .sumup .user .info .drop {
  margin-top: 10px;
  line-height: 32px;
  font-size: 26px;
}

.canvas .sumup .user .info .drop .icon {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  width: 20px;
  height: 30px;
  vertical-align: bottom;
  background: url(/src/assets/water.png) no-repeat bottom right;
  background-size: contain;
}

.canvas .sumup .user .info .drop .plus {
  position: absolute;
  top: 0px;
  right: -12px;
  font-size: 32px;
  opacity: 0;
  color: #ffbe2d;
}

.canvas .sumup .speed {
  display: flex;
  flex-direction: row;
  padding: 16px 32px;
  height: 100px;
  align-items: flex-end;
}

.canvas .sumup .speed .progress {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 208px;
  height: 30px;
  border-radius: 14px;
  background: linear-gradient(#9587ce, #7182d8);
}

.canvas .sumup .speed .speed-1 {
  width: 44px;
  height: 50px;
  margin-left: -8px;
}

.canvas .sumup .speed .speed-2 {
  width: 44px;
  height: 60px;
}

.canvas .sumup .speed .speed-3 {
  width: 58px;
  height: 68px;
  margin-right: -12px;
}

.explain {
  padding: 50px 16px;
  font-size: 28px;
  color: #ff00a5;
  font-weight: bold;
}

.explain .text {
  padding: 16px;
  line-height: 60px;
  text-indent: 40px;
  color: #09b900;
  font-weight: normal;
}

@keyframes rain {
  0% {
    transform: translateY(-6px);
  }

  50% {
    transform: translateY(6px);
  }

  100% {
    transform: translateY(-6px);
  }
}

@keyframes cloud-1 {
  0% {
    opacity: 0.8;
    transform: translate3d(200%, 0, 0);
  }

  50% {
    opacity: 0.6;
    transform: translate3d(800%, 0, 0) scale(1.3);
  }

  100% {
    opacity: 0.8;
    transform: translate3d(-120%, 0, 0);
  }
}

@keyframes cloud-2 {
  0% {
    opacity: 0.8;
    transform: translate3d(820%, 0, 0);
  }

  50% {
    opacity: 0.6;
    transform: translate3d(-120%, 0, 0);
  }

  100% {
    opacity: 0.8;
    transform: translate3d(1080%, 0, 0) scale(1.3);
  }
}

@keyframes cloud-3 {
  0% {
    opacity: 0.6;
    transform: translate3d(-120%, 0, 0) scale(1.3);
  }

  100% {
    opacity: 0.8;
    transform: translate3d(1000%, 0, 0);
  }
}

@keyframes move-1 {
  0% {
    height: 268px;
  }

  10% {
    height: 280px;
  }

  20% {
    height: 295px;
  }

  40% {
    height: 275px;
  }

  70% {
    height: 285px;
  }

  100% {
    height: 264px;
  }
}

.move-1 {
  animation: move-1 1s;
}

@keyframes move-2 {
  0% {
    height: 385px;
  }

  10% {
    height: 390px;
  }

  20% {
    height: 400px;
  }

  40% {
    height: 380px;
  }

  70% {
    height: 395px;
  }

  100% {
    height: 380px;
  }
}

.move-2 {
  animation: move-2 1s;
}

@keyframes move-3 {
  0% {
    height: 475px;
  }

  10% {
    height: 490px;
  }

  20% {
    height: 500px;
  }

  40% {
    height: 470px;
  }

  70% {
    height: 490px;
  }

  100% {
    height: 460px;
  }
}

.move-3 {
  animation: move-3 1s;
}

@keyframes water {
  0% {
    opacity: 0.5;
    transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    transform: translate3d(-900px, 160px, 0) scale(1.5);
  }

  30% {
    opacity: 1;
    transform: translate3d(-900px, 160px, 0) scale(1.5) rotate(-35deg);
  }

  80% {
    opacity: 1;
    transform: translate3d(-900px, 160px, 0) scale(1.5) rotate(-35deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(-900px, 160px, 0) scale(1.5) rotate(0deg);
  }
}

.water {
  animation: water 4s ease-in-out forwards;
}

@keyframes pluss {
  0% {
    opacity: 0.8;
    top: -10px;
  }

  80% {
    opacity: 1;
    top: -80px;
  }

  100% {
    opacity: 0;
    top: -120px;
  }
}

.pluss {
  animation: pluss 2s;
}



</style>
